<div class="panel panel-primary">
  <div class="panel-heading" ng-click="collapse()">
    <span state-display="person.level user-ok user-warning user-problem user-error">{{person.name}}</span></div>
  <div class="panel-body" ng-hide="collapsed">
    <address></address>
    
    <h4>Friends:</h4>
    <ul>
      <li ng-repeat='friend in person.friends'>
        {{friend}}
        <remove-friend method="removeFriend(friend)"></remove-friend>
        
      </li>
    </ul>
    <div ng-show="!!person.rank">
      Rank: {{person.rank}}
    </div>
    <button ng-show="!person.rank" class="btn btn-success" ng-click="knightMe(person)">Knight Me</button>
    <button ng-click="nextState()" class="btn btn-info">Next State</button>
  </div>
</div>